<template>
    <MaskView :visible="visible">
        <div class="perfect-infomation">
            <MmvImage src="02完善信息 弹窗页/完善信息框.png"></MmvImage>
            <div class="input-group">
                <div class="input-wrap">
                    <input v-model="form.name" class="input" placeholder="请输入姓名" type="text">
                    <MmvImage src="02完善信息 弹窗页/01姓名栏.png"></MmvImage>
                </div>
                <div class="input-wrap">
                    <input v-model="form.company" class="input" placeholder="请输入单位" type="text">
                    <MmvImage src="02完善信息 弹窗页/02单位栏.png"></MmvImage>
                </div>
                <div class="input-wrap">
                    <input v-model="form.phone" class="input" placeholder="请输入电话" type="text">
                    <MmvImage src="02完善信息 弹窗页/03电话栏.png"></MmvImage>
                </div>
            </div>
            <ScaleButton v-show="showSubmitBtn" class="perfect-infomation-btn" src="02完善信息 弹窗页/按钮.png" @MmvTap="handleSubmit"></ScaleButton>
        </div>
    </MaskView>
</template>

<script>
export default {
    name: 'PerfectInfomation',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            form: {
                name: '',
                company: '',
                phone: '',
            },
        };
    },
    computed: {
        showSubmitBtn() {
            return this.form.name && this.form.company && this.form.phone;
        },
    },
    methods: {
        handleSubmit() {
            this.$store.commit('app/SET_USER_INFO', this.form);
            this.$emit('update:visible', false);
            this.$emit('submit');
        },
    },
};
</script>

<style lang="scss" scoped>
.perfect-infomation {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.perfect-infomation-btn {
    position: absolute;
    top: 110vw;
}
.input-group {
    width: 100%;
    position: absolute;
    top: 60vw;
}
.input-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    & + & {
        margin-top: 8vw;
    }
    .input {
        position: absolute;
        width: 48vw;
        right: 13vw;
        border: 0;
        font-size: 17px;
    }
}
</style>
